<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="dashboard/header :: header"></head>
<body>
<div layout:fragment="content">
	<!-- ztree -->
	<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">


<style type="text/css">
.col-lg-6 {
	width: 49.5% !important;
}
</style>

		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<!-- /.col-->
					<div class="col-lg-12">

						<div class="card col-lg-6" style="float: left">
							<div class="card-body">

								<form class="form-horizontal" id="addForm">

									<input type="hidden" name="formToken" th:value="${session.formToken}" />
									<input type="hidden" name="functionIds" />

									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="text-input">所属应用</label>
										<div class="col-md-9">
											<input class="form-control" id="text-input" type="text" onclick="showApplication()" name="applicationIdLabel" readonly="readonly" style="cursor: pointer" placeholder="所属应用">
											<input type="hidden" name="applicationId"  />
										</div>
									</div>

									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="text-input">角色名称</label>
										<div class="col-md-9">
											<input class="form-control" id="text-input" type="text" name="roleName" placeholder="角色名称">
										</div>
									</div>

									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="email-input">状态</label>
										<div class="col-md-9">
											<select class="form-control" id="hasStatus" name="hasStatus">
												<option value="1" selected>启用</option>
												<option value="2">禁用</option>
											</select>
										</div>
									</div>
								</form>

							</div>
							
							<!-- 
							<div class="card-footer"
								style="border-top: 0px; margin-bottom: 10px;">
								<button class="btn btn-primary" style="float: right"
									onclick="save()" type="button">保存</button>
							</div>
							-->

						</div>

						<div class="card col-lg-6 tree-card"
							style="float: left; margin-left: 1%; overflow-x: hidden; overflow-y: scroll;">
							<div class="card-body">
								<input type="hidden" name="applicationId"
									value="${applicationId}" />
								<ul id="treeDemo" class="ztree"></ul>
							</div>
						</div>

					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>

	<script type="text/javascript">
			
		var setting = {
			async : {
				enable : true,
				url: ctx+"boot/platform/application/menusData" ,
				otherParam:{"applicationId":function(){return $("input[name=applicationId]").val();}}
			},
			check: {
                enable: true
            },
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "resourceParent",
					rootPId : 0
				},
				key : {
					name : "resourceName"
				}
			},
			callback : {
				onClick : zTreeOnClick 
				// onAsyncSuccess : zTreeOnAsyncSuccess
			}
		};

		function zTreeOnClick(event, treeId, treeNode) {
			console.log("tree node id = " + treeNode.id) ; 
			/*
			$("input[id=selectResourceParentNode]").attr("data-id" ,treeNode.id) ; 
			$("input[id=selectResourceParentNode]").attr("data-resourceName" ,treeNode.resourceName) ; 
			*/
			
			$("input[id=resourceParent]").val(treeNode.id) ;
			search() ; 
		};

		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodes();
			for (var i = 0; i < nodes.length; i++) { //设置节点展开
				treeObj.expandNode(nodes[i], true, true , true);
			}
		}

		$(document).ready(function() {
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
			treeObj.expandAll(true);
			
			var h = $(document).height() - 50 ; 
			$("div.tree-card").css("height" , h) ; 
		});
	</script>


	<script type="text/javascript">
		// 保存操作
		function submitHandler() {
			console.log('save');
			
		    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		　　 var nodes = treeObj.getCheckedNodes(true); //在提交表单之前将选中的checkbox收集
			
		 	if(nodes.length == 0){
		 		layer.alert("请选择功能.") ; 
		 		return ; 
		 	}
		 
		　　 var array = new Array();
		　　 for(var i=0;i<nodes.length;i++){
			　　	array.push(nodes[i].id);
		　　 }
			var functionIds = array.join(",");
			console.log("functionIds = " + functionIds) ; 
			$("input[name=functionIds]").val(functionIds) ; 
		
			/*
			$("#addForm").ajaxSubmit({
				url : ctx+"boot/platform/role/saveFunctions",
				type : "POST",
				headers : {
					'Content-Type' : 'application/x-www-form-urlencoded' //multipart/form-data;boundary=--xxxxxxx   application/json
				},
				success : function(data) {
					if (data.code == 200) {
						layer.msg("操作成功!");
					} else {
						layer.alert(data.message);
					}
				}
			});
			*/
			$.operate.save(ctx+"boot/platform/role/saveFunctions" , $('#addForm').serialize());
		}
		
		function showApplication(){
			var index = layer.open({
				type : 2,
				title : false , //'菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '100%', '100%' ],
				content : ctx+'boot/platform/application/select' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-applicationName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("applicationId = " + id + " , applicationIdLabel = " + resourceName) ;
					
					$("input[name=applicationIdLabel]").val(resourceName) ; 
					$("input[name=applicationId]").val(id) ; 
					
					var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					treeObj.reAsyncChildNodes(null, "refresh");
					
					layer.close(index) ; 
			 	}
			});		
		}
		
	</script>

</body>
</html>
